<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Slider Kit > Photos sliders #2</title>
		<meta name="Keywords" content="slider, kit, slideshow, gallery, carousel, jquery plugin" />
		<meta name="Description" content="Slider Kit jQuery slideshow plugin: photos slider examples, mozzaik sliders" />
		
		<!-- jQuery library -->
		<script type="text/javascript" src="../lib/js/external/_oldies/jquery-1.3.min.js"></script>
		<!--<script type="text/javascript" src="../lib/js/external/jquery-1.6.2.min.js"></script>-->
		
		<!-- jQuery Plugin scripts -->
		<script type="text/javascript" src="../lib/js/external/jquery.easing.1.3.min.js"></script>
		<script type="text/javascript" src="../lib/js/external/jquery.mousewheel.min.js"></script>
		
		<!-- Slider Kit scripts -->
		<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>

		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility				
				
				// Multiple sliders gallery
				$(".photoslider-1click").sliderkit({
					auto:false,
					circular:true,
					panelclick:true,
					mousewheel:true,
					panelfx:"sliding",
					panelfxspeed:400
				});
			});	
		</script>
		
		<!-- Slider Kit styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
		
		<!-- Slider Kit compatibility -->
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie6.css" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie7.css" /><![endif]-->
		<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie8.css" /><![endif]-->

		<!-- Site styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />
	</head>
	<body>
		<div id="header">
			<div id="header-wrapper">
				<div id="header-title"><a href="../sliderkit_en.html" title="SliderKit Homepage">Slider Kit, sliding contents with jQuery.</a></div>
				<div class="spacer"></div>
			</div>
		</div>
		<div id="page" class="inner layout-1col">
			<div id="content">
				<h1 class="code-first">Photos sliders #2</h1>
				
				<noscript><div class="noscript"><span class="code-sitename">Slider Kit</span> jQuery plugin requires Javascript activation.</div></noscript>

				<h2>Multiple sliders</h2>
				<p></p>

				<div class="multiple-sliders">
				
					<div class=" multiple-sliders-part">				
						<!-- start photos slider -->
						<div class="sliderkit photoslider-1click">					
							<div class="sliderkit-panels">
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-01.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-02.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-03.jpg" alt="[Alternative text]" />
								</div>
							</div>
						</div>
						<!-- end photos slider -->					
					</div>
					
					<div class=" multiple-sliders-part">					
						<!-- start photos slider -->
						<div class="sliderkit photoslider-1click multiple-sliders-part">					
							<div class="sliderkit-panels">
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-04.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-05.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-06.jpg" alt="[Alternative text]" />
								</div>
							</div>
						</div>
						<!-- end photos slider -->
					</div>
					
					<div class=" multiple-sliders-part">
						<!-- start photos slider -->
						<div class="sliderkit photoslider-1click multiple-sliders-part">					
							<div class="sliderkit-panels">
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-07.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-08.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-09.jpg" alt="[Alternative text]" />
								</div>
							</div>
						</div>
						<!-- // end of photos gallery -->					
					</div>
				
					<div class=" multiple-sliders-part">				
						<!-- start photos slider -->
						<div class="sliderkit photoslider-1click">					
							<div class="sliderkit-panels">
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-04.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-05.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-06.jpg" alt="[Alternative text]" />
								</div>
							</div>
						</div>
						<!-- end photos slider -->					
					</div>
					
					<div class=" multiple-sliders-part">					
						<!-- start photos slider -->
						<div class="sliderkit photoslider-1click multiple-sliders-part">					
							<div class="sliderkit-panels">
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-07.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-08.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-09.jpg" alt="[Alternative text]" />
								</div>
							</div>
						</div>
						<!-- end photos slider -->
					</div>
					
					<div class=" multiple-sliders-part">
						<!-- start photos slider -->
						<div class="sliderkit photoslider-1click multiple-sliders-part">					
							<div class="sliderkit-panels">
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-01.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-02.jpg" alt="[Alternative text]" />
								</div>
								<div class="sliderkit-panel">
									<img src="../lib/images/photos/medium/sample-03.jpg" alt="[Alternative text]" />
								</div>
							</div>
						</div>
						<!-- // end of photos gallery -->					
					</div>
					
					<div class="spacer"></div>
				</div>
				
				<div class="code-notes">
					<h4>Notes</h4>
					<p><span class="code-setting">panelclick</span> option is set to <span class="code-value">true</span>.</p>
				</div>
				
			</div>
			<div class="spacer"></div>
		</div>
	</body>
</html>